<template>
  <div class="editor-link-btn">
    <div class="editor-link-selected-box" v-if="modelValue.title">
      <div v-if="modelValue.desc" class="desc">{{ modelValue.desc }}</div>
      <div class="title">
        {{ modelValue.title }}
      </div>
    </div>
    <div class="editor-link-btn-text" @click="selectLink">
      {{ modelValue.title ? "更换" : text }}
    </div>
  </div>
  <storeDiyLinkModal
    ref="storeDiyLinkModalRef"
    @change="selectedChange"
    v-model="modelValue"
  ></storeDiyLinkModal>
</template>
    <script lang="ts">
export default {
  name: "storeDiyFormLinkBtn",
};
</script>

<script  lang="ts" setup >
import { ref, getCurrentInstance, watch, onMounted } from "vue";
import storeDiyLinkModal from "../link-modal/index.vue";
const props = withDefaults(
  defineProps<{
    text?: string;
    modelValue: any;
  }>(),
  {
    text: "选择跳转到的页面",
    modelValue: {},
  }
);
const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const emit = defineEmits(["update:modelValue", "change"]);

const storeDiyLinkModalRef = ref<HTMLElement>();

const selectLink = () => {
  proxy?.$refs["storeDiyLinkModalRef"]?.open(props.modelValue);
};

const selectedChange = (link: object) => {
  emit("update:modelValue", link);
  emit("change", link);
};
</script>


<style scoped>
.editor-link-btn {
  display: flex;
  justify-content: flex-end;
  height: 40px;
  line-height: 40px;
}
.editor-link-btn-text {
  cursor: pointer;
  background: #f0f0f0;
  color: #000;
  border: 1px solid #f0f0f0;
  margin: 5px 0;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  border-radius: 2px;
  font-size: 12px;
  white-space: nowrap;
  user-select: none;
}
.editor-link-btn-text:hover {
  background: var(--el-color-primary-light-9);
  border: 1px solid var(--base-default);
  color: var(--base-default);
}

.editor-link-selected-box {
  background: var(--el-color-primary-light-9);
  color: var(--base-default);
  border: 1px solid var(--base-default);
  margin: 5px 0;
  margin-right: 5px;
  height: 30px;
  line-height: 30px;
  padding: 0 5px;
  width: 150px;
  display: flex;
  justify-content: flex-start;
  border-radius: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.editor-link-selected-box .desc {
  position: relative;
  padding-right: 5px;
  margin-right: 5px;
}
.editor-link-selected-box .title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.editor-link-selected-box .desc::before {
  content: "";
  position: absolute;
  height: 10px;
  width: 1px;
  background: #bbb;
  right: 0;
  top: 10px;
}
</style>